/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="interact-ai-flow__wrap">
        <div class="ai-flow__container">
            <sf-toolbar ref="toolbar">
                <div class="list-title">
                    <lang>AI Flow 列表</lang>
                </div>
                <sf-searchfield
                    v-model="searchParams.keyword"
                    class="pull-right"
                    placeholder="请输入关键字"
                    @clear="onEnterkey"
                    @trigger="onEnterkey" />
            </sf-toolbar>
            <div v-if="showEmptyAIFlow"
                 class="flow-total">
                <div
                    v-for="item in flowList"
                    :key="item.id"
                    class="flow-list__item"
                    @click="_enterFlowDetail(item)">
                    <div class="flow-item__top">
                        <div class="left">
                            <div class="flow-title">
                                {{ item.flowName }}
                            </div>
                        </div>
                        <div class="right">
                            <sf-button
                                class="m-r15"
                                icon-cls="iconchakan"
                                size="normalless"
                                @click="_enterFlowVersion($event,item)">
                                <lang>查看版本</lang>
                            </sf-button>
                            <sf-button
                                class="m-r15"
                                icon-cls="iconsip-edit"
                                size="normalless"
                                @click="_editAIFlow($event,item)">
                                <lang>编辑</lang>
                            </sf-button>
                            <sf-button
                                class="m-r15"
                                icon-cls="icon-comp-delete"
                                size="normalless"
                                @click="_deleteAiFlow($event,item)">
                                <lang>删除</lang>
                            </sf-button>
                        </div>
                    </div>
                    <div class="flow-item__center">
                        <div class="right m-r25">
                            <lang>版本：</lang>
                            <span
                                class="font-important task-num"
                                @click="_enterFlowVersion($event,item)">{{ item.versionNum }}</span>
                        </div>
                         <div class="flow-time">
                            <img src="../../../img/time_icon.png"
                                    alt="">
                            <div class="time">
                                <lang>更新时间：</lang>
                            </div>
                            <div class="flow-time__text font-important">
                                {{ encodeTime(item.createTime) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <empty-panel v-else
                         :title="_('没有AI Flow')" />
            <sf-paging-bar
                v-if="flowList.length"
                :options="pageOptions"
                :page-sizes="[Number('10'), Number('20'), Number('50')]"
                :layout="[ 'pager', 'sizes', 'jumper']"
                @sizechange="_onSizeChange"
                @pagechange="_onPageChange" />
        </div>
         <sf-drawer
            :title="aiflowVersionTitle"
            :visible.sync="showAiflowVersionDrawer"
            :size="drawWidth"
            custom-class="task-detail__container"
            :direction="direction">
            <div class="aiflow-version-table__container">
                <aiflow-version-table
                    :aiflow-id="aiflowId" />
            </div>
        </sf-drawer>
    </div>
</template>
<script>
import EmptyPanel from 'src/components/empty_panel';
import { encodeDate } from 'src/util/format';
const PAGE_COUNT = 10;

import trainingUrlAdapter from 'src/home/mod_common/training_url_adapter';
const FLOW_URLS = {
    get: trainingUrlAdapter('project'),
    delete: trainingUrlAdapter('interactiveFlow'),
    put: trainingUrlAdapter('interactiveFlow')
};
import { setStorage } from 'src/util/local_storage';

import editAIFlowForm from './label_form/edit_aiflow_form.vue';
import AiflowVersionTable from './component/aiflow_version_table.vue'

export default  {
    components:{
        EmptyPanel,
        AiflowVersionTable
    },
    data () {
        return {
            flowList: [],
            searchParams: {
                keyword: '',
                pageNum: 0,
                pageSize: PAGE_COUNT,
                projectId: ''
            },
            pageOptions: {
                pageSize: PAGE_COUNT,
                activePage: 1,
                total: 0
            },
            aiFlowTotal:0,
            showEmptyAIFlow:false,
            aiFlowType:0,
            showAiflowVersionDrawer:false,
            direction : 'rtl',
            aiflowVersionTitle:_('版本列表'),
            aiflowId:'',
        };
    },
    computed: {
        projectId () {
            return this.$route.query.projectId || '';
        },
          drawWidth () {
            return 'calc(100% - 400px)';
        }
    },
    mounted () {
        this.refreshGrid();
    },
    methods: {
        _createAIFlowFormWin () {
             if (!this.editAIFlowFormWin) {
                this.editAIFlowFormWin = this.$modal(editAIFlowForm, {
                    autoDestory: true
                });
            }
            return this.editAIFlowFormWin;
        },

            // 编辑Flow
        _editAIFlow (e, record) {
             /*eslint-disable*/
            e.stopPropagation();
            let formWin = this._createAIFlowFormWin();
            formWin.formRoot.setJsonValue(record);
            this.editAIFlowFormWin.open({
                title: _('编辑AI Flow名称'),
                submit: () => {
                    let ajaxParams = this.editAIFlowFormWin.formRoot.getJsonValue();
                    let params = Object.assign(record, ajaxParams);
                    this.ajaxSubmitAIFlow(params, this.editAIFlowFormWin);
                }
            });
        },

        // 执行删除操作
        async ajaxSubmitAIFlow (params, formWin) {
            this.$mask();
            let jsonData = await this.$ajax.put(`${FLOW_URLS.put}/${params.aiFlowId}`, params);
            
            this.$unmask();
            let { success, msg } = jsonData;
            if (!success) {
                this.refreshGrid();
                return this.$showErr(msg || _('编辑失败'));
            }
            this.$ok(_('编辑成功'));
            formWin.hide();
            this.refreshGrid();
        },

            // 刷新grid
        async refreshGrid () {
            this.$mask();
            this.searchParams.projectId = this.projectId;
            let jsonData = await this.$ajax.get(`${FLOW_URLS.get}/${this.projectId}/interactiveFlow`, this.searchParams);
            this.$unmask();
            let { success, msg, data } = jsonData;
            if (!success) {
                this.$showErr(msg || _('加载数据失败'));
                return;
            }
            this.flowList = data.list;
            this.showEmptyAIFlow = !!data.list.length;
            this.pageOptions.total = data.total;
            this.aiFlowTotal = data.total;
        },
        encodeTime (time) {
            return encodeDate(time);
        },

        _deleteAiFlow (e, params) {
              /*eslint-disable*/
            e.stopPropagation();
            let title = params.flowName;
            this.$confirm({
                title: _('提示'),
                subTitle: _('确定要删除{0}吗？', title),
                msg: _('删除后，操作无法撤回，请谨慎操作!'),
                icon: 'warning',
                autoClose: true,
                callback: actionName => {
                    if (actionName === 'submit') {
                        this.ajaxDeleteFlow(params);
                    }
                }
            });
        },

        // 执行删除操作
        async ajaxDeleteFlow (params) {
            this.$mask();
            let jsonData = await this.$ajax.delete(
                `${FLOW_URLS.delete}/${params.aiFlowId}`
            );
            this.$unmask();
            let { success, msg } = jsonData;
            if (!success) {
                return this.$showErr(msg || _('删除失败'));
            }
            this.$ok(_('删除成功'));
            this.refreshGrid();
        },
        _onPageChange (pageNum) {
            Object.assign(this.searchParams, {
                pageNum: pageNum - 1
            });
            this.refreshGrid();
        },
        _onSizeChange (nowPageIndex, nowPageSize) {
            Object.assign(this.searchParams, {
                pageNum: nowPageIndex - 1,
                pageSize: nowPageSize
            });
            this.refreshGrid();
        },
        onEnterkey () {
            this.refreshGrid();
        },
        _enterTaskManager () {
            this.$router.push({
                path: `/project_manager/project_index/visual_task_manager`,
                query: Object.assign(this.$route.query)
            });
        },
        _enterFlowDetail(item) {
            setStorage('pipelineInfo', JSON.stringify(item));
            this.$router.push({
                path: `/project_manager/pipeline_detail`,
                query: Object.assign(this.$route.query, {interactFlowName:item.flowName})
            });
        },
        _enterFlowVersion (e,item) {
              /*eslint-disable*/
            e.stopPropagation();
            this.aiflowId = item.kubeflowPipelineId;
            this.showAiflowVersionDrawer = true;
        }
    }

    
};
</script>
<style lang="less">
.aiflow-version-table__container{
    height: 100%;
    .sfv-scrollbar-auto-height{
        overflow: initial;
    }
}
.interact-ai-flow__wrap {
    width: 100%;
    height: calc(100% - 15px);
    .add-null-flow{
        display: flex;
        margin: 20px 0;
        align-items: center;
    }
    .list-title{
        color: #14161A;
        font-weight: bold;
        font-size: 16px;
        margin-left: 13px;
        line-height: 30px;
    }

    .flow-total {
        height: calc(100% - 88px);
        overflow: auto;
         .flow-time {
            display: flex;
            img {
                width: 16px;
                height: 16px;
                margin-right: 4px;
            }
        }
        .flow-list__item {
            border-bottom: 1px solid #dee3ed;
            height: 96px;
            color: #a3a3a3;
            display: flex;
            flex-direction: column;
            padding-left: 20px;
            overflow: auto;
            cursor: pointer;
            &:hover,
            &.active {
                background: #f6f9ff;
            }
            // &:last-child{
            //     border-bottom:none;
            // }
            .flow-item__top {
                display: flex;
                justify-content: space-between;
                margin-top: 18px;
                margin-bottom: 12px;
                .flow-title {
                    font-size: 16px;
                    color: #1f1f1f;
                    font-weight: 700;
                    margin-right: 20px;
                }
               
                .left {
                    display: flex;
                    align-items: center;
                }
            }
            .flow-item__center {
                display: flex;
                .task-num {
                    color: #204ed9;
                    cursor: pointer;
                }
            }
        }
    }
    .ai-flow__container {
        border: 1px solid #ddd;
        height: 100%;
        border-top:none;
        .cluster-empty-panel__container {
            height: calc(100% - 50px);
        }
    }
    
}
</style>
